<template>
  <div>
    <Bread />
    <div
      v-loading="listLoading"
      element-loading-text="资源加载中"
      element-loading-spinner="el-icon-loading"
      class="detail-container"
    >
      <div class="item">
        <div class="right w-4/5">
          <div class="head">
            <span class="title"> {{ detailInfo && detailInfo.name }} </span>
            <span class="sub"> {{ detailInfo.synopsis }} </span>
          </div>

          <div class="grid grid-cols-2">
            <div class="main">
              <div class="label label-w">专业:</div>
              <div class="label-v">{{ detailInfo.specialty || '无' }}</div>
            </div>

            <div class="main">
              <div class="label label-w">单位:</div>
              <div class="label-v">
                {{ detailInfo.unitName || '无' }}
              </div>
            </div>
          </div>

          <div class="grid grid-cols-2">
            <div class="main">
              <div class="label label-w">所属领域:</div>
              <div class="label-v">
                {{ filedDictName(detailInfo.domainId) }}
              </div>
            </div>
            <div class="main">
              <div class="label label-w">所在地:</div>
              <div class="label-v">
                {{ detailInfo.location || detailInfo.address || '无' }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-content">
        <div class="content">
          <div class="content-head">
            个人简介
          </div>
          <div v-html="detailInfo.content" class="content"></div>
        </div>
        <div class="aside">
          <h5 class="head">
            相关推荐
          </h5>
          <ul class="pl-4">
            <li
              v-for="item in recommendList"
              :key="item.id"
              :class="['recommend-item pr-4']"
              @click="toDetail(item.id)"
            >
              <div class="flex items-center">
                <div class="avatar-container">
                  <el-image
                    src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                    fit="contain"
                  ></el-image>
                </div>
                <div class="flex-grow">
                  <div class="title">{{ item.name }}</div>
                  <p class="sub-title">{{ item.specialty }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bread from '@/components/Bread'
import { getSpeciaDetail, getSpeciaRelist } from '@/api/expert'
export default {
  name: 'expertBaseDetail',
  components: {
    Bread,
  },

  data() {
    return {
      nowId: '',
      listLoading: false,
      detailInfo: {
        name: '',
        sex: '1',
        nativePlace: '',
        birthTime: '',
        phone: '',
        diploma: '',
        graduateSchool: '',
        domainId: '',
        professionalTitle: '',
        reviewExpertMembers: '1',
        unitName: '',
        office: '',
        unitType: '',
        address: '',
        resumeContent: '',
        fileArr: [],
      },

      // 行业类型
      positionDictName: 'user_common_field',
      positionList: [],

      // 推荐列表
      recommendList: [],
    }
  },
  computed: {
    filedDictName() {
      return (fileValue) => {
        let findItem = {}
        findItem = this.positionList.find(
          (item) => parseInt(item.dictValue) === parseInt(fileValue)
        )
        if (findItem) {
          return findItem['dictLabel'] ? findItem['dictLabel'] : '无'
        }
        return '无'
      }
    },
  },
  watch: {
    $route(v) {
      this.getInfoById(v.params.id)
    },
  },
  // beforeRouteEnter(to, from, next) {
  //   next((vm) => {
  //     let id = to.params.id
  //     vm.nowId = id
  //     vm.getInfoById(id)
  //     vm.getRecommendList()
  //   })
  // },
  created() {
    this.getInfoById()
    this.getRecommendList()
    this.initDictList()
  },
  methods: {
    /**
     * @function getInfoById
     * @params    id  [number|string] 详情ID
     * @description 根据 详情id 调用借口获取数据，并将获取到的数据 赋值  this.detailInfo
     **/
    getInfoById(id) {
      if (!(id || id == 0)) {
        id = this.$route.params.id
      }
      this.nowId = id
      this.listLoading = true

      getSpeciaDetail({ id })
        .then((res) => {
          if (res.code == 200) {
            this.detailInfo = res.data
          }
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    initDictList() {
      this.getDictList(this.positionDictName).then((res) => {
        if (res.code == 200) {
          this.positionList = res.data
        }
      })
    },
    toDetail(id) {
      if (id == this.nowId) {
        return
      }
      let toPath = '/techSource/expertBase/expertBaseDetail/' + id
      this.$router.replace({ path: toPath })
    },
    getRecommendList() {
      getSpeciaRelist().then((res) => {
        if (res.code === 200) {
          let list = res.rows
          this.recommendList = list.slice(0, 5)
        }
      })
      // this.recommendList = [
      //   {
      //     id: 86,
      //     name: '张三',
      //     specialty: '生命科学 / 微生物学',
      //   },
      //   {
      //     id: 87,
      //     name: '李四',
      //     specialty: '生命科学 / 微生物学',
      //   },
      // ]
    },
  },
}
</script>

<style lang="scss" scoped>
.main-content {
  .aside {
    height: auto;
    min-width: 390px;
    width: 390px;
    min-height: 349px;
    max-height: 531px;
    .aside-item-active {
      background-color: #d3d3d3;
    }
    @apply border  border-gray-300;
    .line-1 {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
    }
    .recommend-item {
      @apply border-b cursor-pointer;
      padding: 16px 0;

      .title {
        font-size: 14px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        color: #333333;
      }
      .sub-title {
        min-height: 15px;
        font-size: 14px;
        font-family: Source Han Sans CN, Source Han Sans CN-Regular;
        font-weight: 400;
        text-align: left;
        color: #666666;
      }
      .avatar-container {
        width: 61px;
        height: 61px;
        padding: 5px;
        margin-right: 3px;
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .recommend-item:last-of-type {
      border-bottom: none;
    }
  }
}
</style>
